define.template({
    type: 'View',
    node: {
        type: 'Tabs',
        position: 'left',
        nodes: [
            {
                text: 'Buttons',
                target: {
                    type: 'Vertical',
                    nodes: [
                        {
                            type: 'ButtonBar', nodes: [
                                {text: '普通按钮1', on: {click: '$.alert("button1");'}},
                                {text: '普通按钮2', closable: true},
                                {text: '普通按钮3', badge: '99+'},
                                {
                                    text: '普通按钮4', hoverDrop: true, nodes: [
                                        {text: '普通按钮4-1', on: {click: '$.alert("这是普通按钮4-1");'}},
                                        {text: '普通按钮4-2', on: {click: '$.alert("这是普通按钮4-2");'}},
                                        {text: '普通按钮4-3', on: {click: '$.alert("这是普通按钮4-3");'}},
                                        {text: '普通按钮4-4', on: {click: '$.alert("这是普通按钮4-4");'}}
                                    ]
                                },
                                {type: 'SubmitButton', text: '提交按钮2', on: {click: '$.alert("submit2");'}},
                            ]
                        },
                        {
                            type: 'Form', nodes: [
                                {
                                    type: 'Text',
                                    name: 'text',
                                    label: {text: '文本'}
                                }
                            ]
                        }
                    ]
                }
            },
            {
                text: 'Tree',
                target: {
                    type: 'Tree',
                    width: -1,
                    pub: {expanded: true, line: true, icon: '.i-folder', box: {type: 'TripleBox'}},
                    ellipsis: true,
                    nodes: [
                        {text: '北京市'},
                        {text: '上海市'},
                        {
                            text: '福建省',

                            nodes: [
                                {
                                    text: '福州市',
                                    badge: '99+',
                                    nodes: [
                                        {text: '市辖区'},
                                        {text: '鼓楼区'},
                                        {text: '台江区'},
                                        {text: '仓山区'},
                                        {text: '马尾区'},
                                        {text: '晋安区'},
                                        {text: '长乐区'},
                                        {text: '闽侯县'},
                                        {text: '连江县'},
                                        {text: '罗源县'},
                                        {text: '闽清县'},
                                        {text: '永泰县'},
                                        {text: '平潭县'},
                                        {text: '福清市'}
                                    ]
                                },
                                {text: '厦门市'},
                                {
                                    text: '莆田市'
                                },
                                {
                                    text: '三明市'
                                },
                                {
                                    text: '泉州市'
                                },
                                {
                                    text: '漳州市'
                                },
                                {
                                    text: '南平市'
                                },
                                {
                                    text: '龙岩市'
                                },
                                {
                                    text: '宁德市'
                                }
                            ]
                        }
                    ]
                }
            },
            {
                text: 'Album',
                target: {
                    type: 'Album',
                    pub: {
                        focusable: true, tip: true, box: {
                            type: 'CheckBox', name: 'imgBox'
                        }
                    },
                    focusMultiple: true,
                    nodes: [
                        {src: 'skin/img/file.png', text: '文件', badge: true},
                        {src: 'skin/img/folder.png', text: '目录'},
                        {src: '.i-operation-edit', text: '编辑'},
                        {src: '.i-operation-del', text: '删除'},
                        {src: '.i-operation-more', text: '更多'},
                        {src: 'skin/img/file.png', text: '文件'},
                        {src: 'skin/img/folder.png', text: '目录'},
                        {src: '.i-operation-edit', text: '编辑'},
                        {src: '.i-operation-del', text: '删除'},
                        {src: '.i-operation-more', text: '更多'},
                        {src: 'skin/img/file.png', text: '文件'},
                        {src: 'skin/img/folder.png', text: '目录'},
                        {src: '.i-operation-edit', text: '编辑'},
                        {src: '.i-operation-del', text: '删除'},
                        {src: '.i-operation-more', text: '更多'},
                        {src: 'skin/img/file.png', text: '文件'},
                        {src: 'skin/img/folder.png', text: '目录'},
                        {src: '.i-operation-edit', text: '编辑'},
                        {src: '.i-operation-del', text: '删除'},
                        {src: '.i-operation-more', text: '更多'},
                    ]
                }
            },
            {
                text: 'PageBar',
                target: {
                    type: 'Vertical',
                    nodes: [
                        {
                            type: 'PageBar',
                            buttonCount: 5,
                            currentPage: 2,
                            sumPage: 12,
                            src: 'javascript:$.alert($0);',
                            jump: true,
                            keyJump: true,
                            buttonSumPage: true
                        },
                        {
                            type: 'PageBar',
                            face: 'mini',
                            buttonCount: 5,
                            currentPage: 2,
                            sumPage: 12,
                            src: 'javascript:$.alert($0);'
                        },
                        {
                            type: 'PageBar',
                            face: 'simple',
                            buttonCount: 5,
                            currentPage: 2,
                            sumPage: 12,
                            src: 'javascript:$.alert($0);'
                        }
                    ]
                }
            },
            {
                text: 'Html',
                target: {
                    type: 'Horizontal',
                    nodes: [
                        {type: 'Html', width: '*'},
                        {
                            type: 'Html',
                            text: '这是Html2,这文字是<span style="color:green;">绿色</span>,这背景是<span style="background:grey;">灰色</span>',
                            style: 'background:#efefef;',
                            width: 1200
                        },
                        {type: 'Html', width: '*'}
                    ]
                }
            },
            {
                text: 'Split',
                target: {
                    type: 'Horizontal',
                    nodes: [
                        {
                            type: 'Form', width: '*', nodes: [
                                {
                                    colSpan: -1,
                                    node: {
                                        type: 'Toggle', text: '基础信息'
                                    }
                                },
                                {type: 'Text', label: {text: '姓名'}},
                                {type: 'Text', label: {text: '姓名'}},
                                {type: 'Text', label: {text: '姓名'}},
                                {type: 'Text', label: {text: '姓名'}},
                                {type: 'Text', label: {text: '姓名'}},
                                {type: 'Text', label: {text: '姓名'}},

                                {
                                    colSpan: -1,
                                    node: {
                                        type: 'Toggle', text: '指定收缩', target: 'text222'
                                    }
                                },
                                {type: 'Text', label: {text: '收缩1'}},
                                {
                                    id: 'text222',
                                    node: {type: 'Text', label: {text: '收缩2'}}
                                },

                                {
                                    colSpan: -1,
                                    node: {
                                        type: 'Toggle', text: '扩展信息'
                                    }
                                },
                                {type: 'Text', label: {text: '拓展'}},
                                {type: 'Text', label: {text: '拓展'}},
                                {type: 'Text', label: {text: '拓展'}},
                                {type: 'Text', label: {text: '拓展'}},
                                {type: 'Text', label: {text: '拓展'}},


                            ]
                        },
                        {
                            type: 'Split', width: 10, style: 'background:#efefef;', movable: true, range: '400,30',
                            icon: '.i-split-left', expandedIcon: '.i-split-right', hide: 'next'
                        },
                        {type: 'Html', width: '200'}
                    ]
                }
            },

            {
                text: 'Calendar',
                target: {
                    type: 'Vertical',
                    scroll: true,
                    nodes: [
                        {type: 'Toggle', text: '日期模式'},
                        {
                            type: 'Calendar', fillBlank: true, nodes: [
                                {value: '2020-03-15', focusable: true, focus: true}
                            ]
                        },
                        {type: 'Toggle', text: '周模式'},
                        {type: 'Calendar', face: 'week'},
                        {type: 'Toggle', text: '月模式'},
                        {type: 'Calendar', face: 'month'},
                        {type: 'Toggle', text: '年模式'},
                        {type: 'Calendar', face: 'year'},
                    ]
                }
            },

            {
                text: 'Progress',
                target: {
                    type: 'Vertical',
                    nodes: [
                        {
                            type: 'Progress',
                            pub: {range: '25,50,75,100'},
                            nodes: [
                                {percent: 20},
                                {percent: 30},
                                {percent: 60},
                                {percent: 75},
                                {percent: 100},
                            ]
                        }
                    ]
                }
            },
            {
                text: 'Timeline',
                target: {
                    type: 'Timeline',
                    nodes: [
                        {text: '开始下单', icon: '.i-file', align: 'left'},
                        {text: '商品出库', icon: '.i-folder', align: 'right'},
                        {text: '快递运输', icon: '.i-file', align: 'left'},
                    ]
                }
            },
            {
                text: 'EmbedWindow',
                target: {
                    type: 'EmbedWindow',
                    src: 'https://www.baidu.com'
                }
            }
        ]
    }
});